<template>
  <a-row :gutter="24" type="flex">
    <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
      <a-row>
        <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
          <div class="table-page-search-wrapper" style="float: right">
            年份区间：
            <a-select placeholder="开始年份" v-model="startYearProcessing" style="width: 120px">
              <a-select-option
                v-for="(value,index) in years"
                :key="index"
                :label="value"
                :value="value">{{ value }}</a-select-option>
            </a-select>
            ～
            <a-select placeholder="结束年份" v-model="endYearProcessing" style="width: 120px;margin-right: 10px">
              <a-select-option
                v-for="(value,index) in years"
                :key="index"
                :label="value"
                :value="value">{{ value }}</a-select-option>
            </a-select>
            统计维度：
            <a-select placeholder="请选择" v-model="typeProcessing" style="width: 80px">
              <a-select-option
                v-for="(label,value) in yearlyTaskTypeDict"
                :key="value"
                :label="label"
                :value="parseInt(value)">{{ label }}
              </a-select-option>
            </a-select>
            <a-button type="primary" @click="financingNewAndStockAmounts()" style="margin-left:10px;margin-right: 15px">查询</a-button>
          </div>
        </a-col>

      </a-row>
      <a-row>
        <a-col class="chart_col">
          <div id="c1"></div>
        </a-col>
      </a-row>
    </a-col>
  </a-row>
</template>

<script>
import { Chart, Util } from '@antv/g2'

export default {
  data () {
    return {
      data1: [
        { name: 'London', '月份': 'Jan.', '月均降雨量': 18.9 },
        { name: 'London', '月份': 'Feb.', '月均降雨量': 28.8 },
        { name: 'London', '月份': 'Mar.', '月均降雨量': 39.3 },
        { name: 'London', '月份': 'Apr.', '月均降雨量': 81.4 },
        { name: 'London', '月份': 'May', '月均降雨量': 47 },
        { name: 'London', '月份': 'Jun.', '月均降雨量': 20.3 },
        { name: 'London', '月份': 'Jul.', '月均降雨量': 24 },
        { name: 'London', '月份': 'Aug.', '月均降雨量': 35.6 },
        { name: 'Berlin', '月份': 'Jan.', '月均降雨量': 12.4 },
        { name: 'Berlin', '月份': 'Feb.', '月均降雨量': 23.2 },
        { name: 'Berlin', '月份': 'Mar.', '月均降雨量': 34.5 },
        { name: 'Berlin', '月份': 'Apr.', '月均降雨量': 99.7 },
        { name: 'Berlin', '月份': 'May', '月均降雨量': 52.6 },
        { name: 'Berlin', '月份': 'Jun.', '月均降雨量': 35.5 },
        { name: 'Berlin', '月份': 'Jul.', '月均降雨量': 37.4 },
        { name: 'Berlin', '月份': 'Aug.', '月均降雨量': 42.4 }
      ]
    }
  },
  mounted () {
    // -------------------------条形图-------------------------------
    // setTimeout(() => {
    const chart1 = this.newChart('c1', 400)
    this.BarChart(chart1, this.data1)
    // }, 10000)
  },
  methods: {
    // 创建 Chart 对象
    newChart (id, height, width, autoFit = true) {
      return new Chart({
        container: id, // 指定图表容器 ID
        autoFit: autoFit, // 是否自适应
        height: height, // 指定图表高度
        width: width // 指定图表宽度
      })
    },
    // 条形图
    BarChart (chart, data) {
      chart.data(data)
      chart.scale('月均降雨量', {
        nice: true
      })
      chart.tooltip({
        showMarkers: false,
        shared: true
      })

      chart
        .interval()
        .position('月份*月均降雨量')
        .color('name')
        .adjust([
          {
            type: 'dodge',
            marginRatio: 0
          }
        ])

      chart.interaction('active-region')

      chart.render()
    },
    // 分面图
    getTypeColor (type) {
      if (type === '转基因作物种植面积') { return '#403c9d' }
      if (type === '耕地总面积') { return '#2fc25b' }
      if (type === '转基因作物种植占比（%）') { return '#facc14' }
    },
    FacetChart (name, data) {
      name.data(data)
      name.legend(false)
      name.tooltip({
        showMarkers: false
      })
      name.facet('rect', {
        fields: ['class'],
        columnTitle: {
          offsetY: -15,
          style: {
            fontSize: 14,
            fontWeight: 300,
            fill: '#8d8d8d'
          }
        },
        eachView: (view, facet) => {
          view.coordinate().transpose()

          if (facet.columnIndex === 0) {
            view.axis('country', {
              tickLine: null,
              line: null
            })
            view.axis('value', false)
          } else {
            view.axis(false)
          }
          const color = this.getTypeColor(facet.columnValue)
          view
            .interval()
            .adjust('stack')
            .position('country*value')
            .color('type', [color, '#ebedf0'])
            .size(20)
            .label('value*type', (value, type) => {
              if (type === '2') {
                return null
              }
              const offset = (value < 30) ? 10 : -4
              return {
                offset
              }
            })
          view.interaction('element-active')
        }
      })
      name.render()
    },
    // 折线图
    CurveChart (name, data) {
      name.data(data)
      name.scale({
        nlp: {
          min: 0,
          max: 100
        },
        blockchain: {
          min: 0,
          max: 100
        }
      })
      name.axis('nlp', false)
      name.legend({
        custom: true,
        items: [
          { name: 'blockchain', value: 'blockchain', marker: { symbol: 'line', style: { stroke: '#403c9d', lineWidth: 2 } } },
          { name: 'nlp', value: 'nlp', marker: { symbol: 'line', style: { stroke: '#2fc25b', lineWidth: 2 } } }
        ]
      })
      name.line().position('date*blockchain').color('#403c9d')
      name.line().position('date*nlp').color('#2fc25b')
      name.annotation().dataMarker({
        top: true,
        position: ['2016-02-28', 9],
        text: {
          content: 'Blockchain 首超 NLP',
          style: {
            textAlign: 'left'
          }
        },
        line: {
          length: 30
        }
      })
      name.annotation().dataMarker({
        top: true,
        position: ['2017-12-17', 100],
        line: {
          length: 30
        },
        text: {
          content: '2017-12-17, 受比特币影响，\n blockchain搜索热度达到顶峰\n峰值：100',
          style: {
            textAlign: 'right'
          }
        }
      })
      name.removeInteraction('legend-filter') // 自定义图例，移除默认的分类图例筛选交互
      name.render()
    },
    ColumnarChart (name, data) {
      name.data(data)
      name.scale('value', {
        alias: '销售额(万)'
      })
      name.axis('type', {
        tickLine: {
          alignTick: false
        }
      })
      name.axis('value', false)
      name.tooltip({
        showMarkers: false
      })
      name.interval().position('type*value')
      name.interaction('element-active')
      // 添加文本标注
      data.forEach((item) => {
        name
          .annotation()
          .text({
            position: [item.type, item.value],
            content: item.value,
            style: {
              textAlign: 'center'
            },
            offsetY: -30
          })
          .text({
            position: [item.type, item.value],
            content: (item.percent * 100).toFixed(0) + '%',
            style: {
              textAlign: 'center'
            },
            offsetY: -12
          })
      })
      name.render()
    }
  }
}
</script>

<style lang="less" scoped>
  .ant-row{
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #ccc;
  }
</style>
